<template>
  <div>
    <div class="banner">
      <el-carousel height="600px">
        <el-carousel-item v-for="(item, i) in banner" :key="i">
          <!-- <img :src="item.picUrl" /> -->
          <img src="../assets/images/banner.jpg" style="width: 100%;height: 100%;" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div v-for="(item, i) in allList" :key="i">
      <!-- 广告版块 -->
      <div class="content" v-if="item.type == 1">
        <div class="ad_product_menu">
          <img src="../assets/images/ad_product.jpg" />
        </div>
        <div class="ad_product_main">
          <ul>
            <li v-for="(itemAd, i) in item.contents" :key="i">
              <!-- <img :src="itemAd.picUrl" /> -->
              <img src="../assets/images/p1.jpg" alt="">
            </li>
          </ul>
        </div>
      </div>
      <!-- 商家推荐版块 -->
      <div class="content" v-if="item.type == 2">
        <div class="index_hot">
          <div class="index_hot_menu">{{ item.name }}</div>
          <div class="index_hot_main">
            <ul>
              <li v-for="(itemHot, i) in item.contents" :key="i">
                <!-- <img :src="itemHot.picUrl" /> -->
                <img src="../assets/images/p1.jpg" />
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 产品版块 -->
      <div class="content" v-if="item.type==3">
          <div class="index_hot_menu">{{item.name}}</div>
  
          <div class="index_productlist">
            <div v-for="(itemBig,key1) in item.contents" :key="key1">
              <div class="index_productlist_left" v-if="itemBig.type==2">

                <img src="../assets/images/p1.jpg" />
              </div>
            </div>
  
            <div class="index_productlist_right">
              <ul>
                <div v-for="(itemSmall,i) in item.contents" :key="i">
                  <li v-if="itemSmall.type==0">
                 
                    <img src="../assets/images/p1.jpg" />
                  </li>
                </div>
              </ul>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      allList: [],
      banner: [],
    };
  },
  methods: {
    getBanner() {
      this.$axios
        .get("http://api.mm2018.com:8095/api/goods/home")
        .then((res) => {
            
          //给allList重新赋值
          this.allList = res.data.result;
        this.banner = this.allList[0].contents;
        });
    },
  },
  created() {
    this.getBanner();
  },
};
</script>
  <style scoped>
.content {
  width: 1140px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}
ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
.banner {
  width: 100%;
  height: 600px;
}

.ad_product {
  width: 100%;
  overflow: hidden;
}

.ad_product_menu {
  width: 100%;
  height: 36px;
  margin-top: 50px;
  margin-bottom: 50px;
}

.ad_product_main {
  width: 100%;
}

.ad_product_main ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.ad_product_main ul li img {
  display: block;
  width: 360px;
  height: 268px;
}

.index_hot {
  width: 100%;
}

.index_hot_menu {
  width: 100%;
  height: 40px;
  background: #348408;
  margin-top: 50px;
  line-height: 40px;
  color: #fff;
  text-indent: 20px;
}

.index_hot_menu span {
  padding-right: 25px;
}

.index_hot_main {
  width: 100%;
}

.index_hot_main ul {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  padding-top: 50px;
}

.index_hot_main ul li {
  width: 360px;
  margin-bottom: 30px;
}

.index_hot_main ul li img {
  width: 360px;
  height: 268px;
}

.index_hot_main ul li p {
  text-align: center;
  line-height: 30px;
  margin: 0px;
  padding: 0px;
  padding-top: 20px;
}

.index_productlist {
  width: 100%;
  height: auto;
  padding-top: 50px;
  overflow: hidden;
}

.index_productlist_left {
  width: 545px;
  height: auto;
  float: left;
}

.index_productlist_left img {
  display: block;
  width: 545px;
  height: 400px;
}

.index_productlist_right {
  width: 585px;
  float: right;
}

.index_productlist_right ul {
  display: flex;
  justify-content: space-around;
  flex-flow: wrap;
}

.index_productlist_right ul li {
  width: 275px;
  height: 190px;
  overflow: hidden;
  margin-bottom: 20px;
}

.index_productlist_right ul li img {
  width: 275px;
  height: 190px;
  display: block;
}
</style>